<template>
  <el-input v-model="inputValue" />
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";
import { ElInput } from "element-plus";
/**
 * computed 的使用场景
 */
interface IProps {
  value: string;
}
const props = defineProps<IProps>();
const emits = defineEmits(["update:value"]);
/**
 * 为了不打破单向数据流原则，不能将 props.value  直接绑定到 input 的 v-model 上
 * 可以使用 computed 做一层转换
 */
const inputValue = computed({
  get() {
    return props.value;
  },
  set(val) {
    console.log(val);
    emits("update:value", val);
  },
});
</script>

<style scoped lang="less"></style>
